<template>
  <div :id="echarts" :style="getheight"></div>
</template>
<script>
export default {
  name: 'curveLine',
  mixins: [],
  computed: {
    echarts() {
      return 'echarts' + Math.random() * 100000
    },
    getheight() {
      return `height:${this.height}px`
    }
  },
  props: {
    chartData: {
      type: Object,
      default: () => {}
    },
    radarArea: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: 340
    },
    title: {
      type: String,
      default: ''
    },
    color: {
      type: Array,
      default: () => ['#4A99FF', '#4A99FF']
    }
  },
  watch: {
    chartData() {
      this.draw()
    }
  },
  data() {
    return {
      list: [],
      option: {
        color: this.color,
        grid: { top: '30px', left: '30px', right: '30px', bottom: '30px' },
        legend: {
          orient: 'vertical',
          icon: 'circle', //图例形状
          data: [],
          bottom: 0,
          right: 0,
          itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
          itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
          itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
            fontSize: 14,
            color: '#00E4FF'
          }
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          },
          indicator: [],
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: '#153269'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#113865', // 分隔线颜色
              width: 1 // 分隔线线宽
            }
          }
        },
        series: [
          {
            type: 'radar',
            symbolSize: 8,
            // symbol: 'angle',
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const chartFactor = this.$echarts.init(
        document.getElementById(this.echarts)
      )

      this.option.radar.indicator = this.radarArea
      this.option.legend.data = this.chartData.legend
      this.option.series[0].data = this.dealData(this.chartData)
      chartFactor.setOption(this.option, true)
    },
    dealData(obj) {
      let ret = []
      for (const i in obj.data) {
        let temp = {
          value: obj.data[i],
          name: obj.legend[i],
          itemStyle: {
            normal: {
              lineStyle: {
                color: this.color[i]
              },
              shadowColor: this.color[i],
              shadowBlur: 10
            }
          },
          areaStyle: {
            normal: {
              // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: this.color[i]
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(0,0,0,0)'
                  },
                  {
                    offset: 1,
                    color: this.color[i]
                  }
                ],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        }
        ret.push(temp)
      }
      return ret
    }
  }
}
</script>
